<template>
    <div class="com-container">
        <div class="com-echart" ref="hot_ref">
        </div>
        <span class="iconfont left" @click="handleClick(0)" :style="commonStyle" :class="{ dark_theme: isDarkTheme, light_theme: !isDarkTheme }">&#xe6ef</span>
        <span class="iconfont right" @click="handleClick(1)" :style="commonStyle" :class="{ dark_theme: isDarkTheme, light_theme: !isDarkTheme }">&#xe6ed</span>
        <span class="cate_name" :style="commonStyle" :class="{ dark_theme: isDarkTheme,light_theme: !isDarkTheme }">{{cateName}}</span>
        <ReSize :comName="'hot'"></ReSize>
    </div>
</template>

<script setup>
import { onMounted, ref, computed, onUnmounted,watch } from 'vue';
import { getHotDataService } from '@/api/index'
import { markRaw } from 'vue';
import ReSize from './ReSize.vue';
import { useThemeStore } from '@/stores';
const themeStore = useThemeStore()

const chartInstance = ref(null)
const hot_ref = ref(null)
const initChart = () => {
    chartInstance.value = markRaw(echarts.init(hot_ref.value, themeStore.currentTheme))
    //分离option的思想，将数据与其他样式的配置分离开，便于维护
    const initOption = {
        title:{
            text:'热销商品占比',
            top:20,
            left:20
        },
        tooltip:{
            formatter:(arg)=>{
                //arg是所高亮的饼图的信息，其中data里面包含series中所有信息
                //console.log(arg)
                const thirdCate=arg.data.children
                let total=0
                thirdCate.forEach(e=>{
                    total+=e.value
                })
                let res=''
                thirdCate.forEach(e => {
                    res+=`${e.name}:${parseInt(e.value/total*100)}%<br/>`
                })
                return res
            },
        },
        legend:{
            top:'15%',
            icon:'circle'
        },
        series:{
            type:'pie',
            label:{
                show:false
            },
            emphasis:{
                label:{
                    show:true
                },

            }
        }
    }
    chartInstance.value.setOption(initOption)

}



const updateChart = () => {
    const legendArr= dataList.value[currentIndex.value].children.map(e=>e.name)
    const seriesArr=dataList.value[currentIndex.value].children.map(e=>{
        return {
            name:e.name,
            value:e.value,
            children:e.children
        }
    })
    const dataOption = {
        legend:{
            data:legendArr
        },
        series:{
            data:seriesArr
        }
    }
    chartInstance.value.setOption(dataOption)
}



const dataList = ref([])
const getHotData = ret => {
    dataList.value =ret
    updateChart()
}


const commonStyle=computed(()=>{
    return{
        fontSize:titleFontSize.value*1.3+'px'
    }
})
const titleFontSize =ref(0)
const screenAdaptor = () => {
    titleFontSize.value = hot_ref.value.offsetWidth / 100 * 3.6
    const adaptOption = {
        title:{
            textStyle:{
                fontSize:titleFontSize.value
            }
        },
        legend:{
            itemWidth:titleFontSize.value/2,
            itemHeight:titleFontSize.value/2,
            itemGap:titleFontSize.value/2,
            textStyle:{
                fontSize: titleFontSize.value/2
            }
        },
        series:{
            radius:titleFontSize.value*4.5,
            center:['50%','60%']
        },

    }
    chartInstance.value.setOption(adaptOption)
    chartInstance.value.resize()
}


const currentIndex=ref(0)
const handleClick=(index)=>{
    //index=0表示向左
    if(!index){
        currentIndex.value--
        if(currentIndex.value<0) currentIndex.value=dataList.value.length
    }
    else{
        currentIndex.value++
        if (currentIndex.value >= dataList.value.length) currentIndex.value = 0
    }
    updateChart()
    
}


const cateName=computed(()=>{
    if(!dataList.value||dataList.value.length===0) return ''
    
    else return dataList.value[currentIndex.value].name
    
   
})

SocketService.registerCallBack('hotData', getHotData)

defineExpose({
    screenAdaptor
})

watch(() => themeStore.currentTheme, () => {
    chartInstance.value.dispose()
    initChart()
    updateChart()
    screenAdaptor()
})
const isDarkTheme = computed(() => {
    return themeStore.currentTheme === 'chalk'
})

onMounted(async () => {
    initChart()
    SocketService.send({
        action: 'getData',
        socketType: 'hotData',
        chartName: 'hot',
        value: ''
    })
    window.addEventListener('resize', screenAdaptor)
    screenAdaptor()
})
onUnmounted(() => {
    window.removeEventListener('resize', screenAdaptor)
})

</script>

<style  scoped>
.com-container{
    position: relative;
}
.iconfont{
    position: absolute;
    cursor: pointer;
    font-weight: bold;
}
.left{
    left: 10%;
    top:50%;
    transform: translateY(-50%);
}
.right{
      right: 10%;
    top:50%;
    transform: translateY(-50%);
}

.cate_name{
    position: absolute;
    left: 80%;
    bottom:5%;
    font-weight: bold;
}

.dark_theme{
    color: white;
}

.light_theme{
    color: black;
}
</style>